import classNames from 'classnames'
import React, { HTMLAttributes } from 'react'
import './BasicCard.less'

interface BasicCardProps extends HTMLAttributes<any> {
  children?: React.ReactNode
  /** 是否需要padding，默认true */
  padding?: boolean
  /** 是否需要添加div容器，默认为true，若为false，将会把样式设置到子元素内 */
  container?: boolean
}

/**
 * 基础卡片
 */
export const BasicCard = (props: BasicCardProps) => {
  const {
    children,
    className,
    padding = true,
    container = true,
    ...restProps
  } = props
  const newClassNames = classNames('chunmi-basic-card', className, {
    'chunmi-basic-card__padding': padding,
  })
  if (container || !children) {
    return (
      <div className={newClassNames} {...restProps}>
        {children}
      </div>
    )
  }
  const newProps = {
    ...restProps,
    className: newClassNames,
  }
  return React.cloneElement(children as React.ReactElement, newProps)
}
